<template>
  <div>
    <div class="postMaMa">
      <el-table
          size="small"
          stripe
          border
          :data="linkList"
          style="width: 70%">
        <el-table-column
            prop="id"
            label="id"
            width="180">
        </el-table-column>
        <el-table-column
            prop="data"
            label="原网址"
            width="180">
        </el-table-column>
        <el-table-column
            prop="num"
            label="访问次数">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="primary"
                @click="showQr = true,showQrcode(scope.row)">展示二维码
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div>
        <el-pagination
                       :current-page="page.current"
                       :page-size="page.size"
                       layout="total,prev,pager,next,jumper"
                       :total="page.total"
                       @current-change="pagechange"
        >
        </el-pagination>
      </div>

      <div style="margin-top: 50px">
        <a href="http://www.xhxlcloud.com:8080/link/admin/xlsx"
           target="_blank"
           style="text-decoration: none;margin-left:60px">
          点我导出所有链接信息
        </a>
      </div>
    </div>

    <el-dialog
        title="编辑信息"
        :visible.sync="dialogVisible"
        width="30%">
      <div>
        <el-tag style="width: 66px">id</el-tag>
        <el-input type="text" v-model="updatePos.id" class="updatePosInput"></el-input>
      </div>
      <div>
        <el-tag>shortlink</el-tag>
        <el-input type="text" v-model="updatePos.qrData" class="updatePosInput"></el-input>
      </div>

    </el-dialog>

    <div>
      <el-dialog :title=this.show.id :visible.sync="showQr" style="width: 600px;margin-left: 700px;margin-top: 100px">
        <vue-qr :text="this.show.link" :size="250" colorDark="#4169E1" colorLight="#fff"></vue-qr>
      </el-dialog>
    </div>

  </div>

</template>

<script>
import {Message} from "element-ui";

export default {
  name: '',
  data() {
    return {
      page: {
        size: 0,//每页显示条目个数
        total: 0,//一共有多少数据
        current: 1,//当前页
      },
      showQr: false,
      show: {
        id: '',
        link: ''
      },
      addLink: {
        id: 0,
        data: '',
        num: 0,
        gmtCreate: '',
        gmtModified: '',
        deleted: 0,
      },
      linkList: [],
      dialogVisible: false,
      updatePos: {
        id: '',
        qrData: '',
        loginNum: ''
      },
    }
  },
  methods: {

    init(){
      this.getRequest('/link/all/'+this.page.current).then(resp => {
        this.linkList=resp.data.records
        this.page.size=resp.data.size
        this.page.total=resp.data.total
        this.page.current=resp.data.current
      })
    },

    pagechange(val){
      this.page.current=val
      this.init()
    },

    showQrcode(data) {
      this.show.id = data.id;
      this.show.link = "http://www.xhxlcloud.com:8080/find/"+data.id;
    },
    handleDelete(data) {
      //这个data,name不用要
      this.$confirm('此操作将永久删除该[' + data.id + ']数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.postRequest('/link/delete?id=' + data.id).then(resp => {
          if (resp.message) {
            Message.success("删除成功")
            this.init();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
  mounted() {
    this.init();
  }

}
</script>

<style scoped>

a::before{
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -5px;
  top: -5px;
  background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size: 400%;
  border-radius: 50px;
  filter:blur(10px);
  z-index: -1;
}

a {
  line-height: 70px;
  text-align: center;
  position: absolute;
  font-weight: 700;
  font-size:24px;
  background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size: 400%;
  height: 70px;
  width: 400px;
  border-radius: 50px;
  z-index: 1;
}

@keyframes sun {
  100%{
    background-position: -400% 0;
  }
}

a:hover::before{
  animation: sun 8s infinite;
}
a:hover {
  animation: sun 8s infinite;
}

.postMaMa {
  margin-top: 10px;
}

.updatePosInput {
  width: 280px;
  margin-left: 8px;
}
</style>
